<template>
  <div class="m-2 p-3" v-enter-helper="[initData, listQuery, meta]">
    <el-card>
      <div slot="header" class="clearfix">
        <el-form :model="listQuery" inline>
          <el-form-item label="日期范围">
            <el-date-picker
              v-model="dateList"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="handlePanelChange">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="deBounceWrap(handleSubmit)"
            >搜索
            </el-button
            >
            <el-button type="primary" @click="deBounceWrap(handleExport)"
            >导出
            </el-button
            >
          </el-form-item>
        </el-form>
      </div>

      <el-table :data="tableData" border v-loading="loading">
        <el-table-column label="记录时间" prop="created_at"></el-table-column>
        <el-table-column label="总余额" prop="all_user_money"></el-table-column>
        <el-table-column
          label="总收益"
          prop="all_user_earnings"
        ></el-table-column>
        <el-table-column
          label="背包礼物价值"
          prop="all_user_gift"
        ></el-table-column>
        <el-table-column
          label="公会收益"
          prop="all_labor_earnings"
        ></el-table-column>
        <el-table-column
          label="公会余额"
          prop="all_labor_money"
        ></el-table-column>
        <el-table-column
          label="水滴价值"
          prop="all_water_money"
        ></el-table-column>
        <el-table-column
          label="占星阁戏价值"
          prop="all_game_money"
        ></el-table-column>
      </el-table>
      <el-pagination
        class="mt-3 text-right"
        background
        layout="total, prev, pager, next"
        :total="meta.total"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import {remainIndex, getExport} from "@/api/dataPanel/financial";

export default {
  name: "financialStatements",
  data() {
    return {
      loading: false,
      listQuery: {
        start_time: undefined,
        end_time: undefined
      },
      dateList: [],
      tableData: [],
      meta: {
        page: 1,
        page_size: 10,
        total: 0
      }
    };
  },
  created() {
    this.initData(this.listQuery, this.meta);
  },
  methods: {
    initData(params, meta) {
      this.loading = true;
      remainIndex(params, meta)
        .then(res => {
          const {
            data: {list, last_page, current_page, total}
          } = res;
          this.tableData = list;
          this.meta.page = current_page;
          this.meta.total = total;
        })
        .finally(() => (this.loading = false));
    },
    handleSubmit() {
      // Solve the problem of parsing failure caused by the binding value becoming null when the date component is empty
      let [start_time, end_time] = this.dateList || [];
      if (start_time)
        this.listQuery.start_time = parseInt(
          `${new Date(start_time).valueOf() / 1e3}`
        );
      if (end_time)
        this.listQuery.end_time = parseInt(
          `${new Date(end_time).valueOf() / 1e3}`
        );
      this.initData(this.listQuery, this.meta);
    },
    handleCurrentChange(page) {
      this.meta.page = page;
      this.initData(this.listQuery, this.meta);
    },
    // 日期 picker 值变化的时候触发
    handlePanelChange(date) {
      if (date === null) {
        this.listQuery.start_time = undefined;
        this.listQuery.end_time = undefined;
      }
    },
    //
    handleExport() {
      let [start_time, end_time] = this.dateList || [];
      if (start_time)
        this.listQuery.start_time = parseInt(
          `${new Date(start_time).valueOf() / 1e3}`
        );
      if (end_time)
        this.listQuery.end_time = parseInt(
          `${new Date(end_time).valueOf() / 1e3}`
        );

      getExport(this.listQuery).then(res => {
        location.href = res.data.download_url;
      });
    }
  }
};
</script>

<style scoped></style>
